/**
 * 企业资质
 */
import { defineComponent, ref } from 'vue';
import { ToThousandsTOOL } from '@/utils';
import { QualificationMap } from '@config/map';
import QualificationModal from './QualificationModal';
import './style.scss';

export default defineComponent({
  name: 'Qualification',
  props: {
    data: Array,
    modalData: Array,
  },
  setup(props) {
    const isModal = ref(false);
    const modal: any = ref({});

    const handleModal = (comp) => {
      if (comp.key) {
        // 点击资质icon
        // 处理数据
        const data: any = props?.modalData?.find((q: any) => q.key === comp.key);
        modal.value = { ...data, icon: comp.icon, label: comp.label, code: comp.code };
        // 显示弹窗
        isModal.value = true;
      } else {
        // 关闭弹框
        isModal.value = false;
      }
    };

    return { isModal, modal, handleModal };
  },
  render(props: any) {
    return (
      <>
        <ul id="Qualification">
          {QualificationMap.map((comp) => {
            const cnt = props.data?.find?.((c) => c.code === comp.code)?.value;

            return (
              <li
              // onClick={() => {
              //   this.handleModal(comp);
              // }}
              >
                <div>
                  <div>
                    <img src={require(`@assets/${comp.icon}`)} />
                  </div>
                </div>
                <section>
                  <header>{comp.label}</header>
                  <p>
                    {cnt ? ToThousandsTOOL(cnt) : '-'}
                    <span>家</span>
                  </p>
                </section>
              </li>
            );
          })}
        </ul>

        {this.isModal && <QualificationModal handleModal={this.handleModal} data={this.modal}></QualificationModal>}
      </>
    );
  },
});
